<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="cleartype" content="on">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://webapi.amap.com">
  <link rel="dns-prefetch" href="https://restapi.amap.com">
  <link rel="dns-prefetch" href="https://vdata.amap.com">
  <link rel="dns-prefetch" href="https://vdata01.amap.com">
  <link rel="dns-prefetch" href="https://vdata02.amap.com">
  <link rel="dns-prefetch" href="https://vdata03.amap.com">
  <link rel="dns-prefetch" href="https://vdata04.amap.com">
  <link rel="dns-prefetch" href="https://sdf.amap.com">
  <link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
  <title>an example for echarts-extension-amap</title>
  <!-- 引入高德地图的JavaScript API并定义版本号和插件 这里需要使用你在高德地图开发者平台申请的 ak -->
  <!-- 如果你在使用的是 v1.9.0 之前的旧版本，还需要引入 `AMap.CustomLayer` 插件 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
  <!-- 引入ECharts -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <!-- 引入ECharts高德地图扩展 -->
  <!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-extension-amap@1.10.1/dist/echarts-extension-amap.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-amap {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="echarts-amap"></div>
  <!-- 数据来源于百度地图 仅作示例 与高德坐标稍有偏差 -->
  <script type="text/javascript">
    var heatmapDataURI = 'https://cdn.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/hangzhou-tracks.json';

    var option = {
      // 加载 amap 组件
      amap: {
        // 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
        viewMode: '3D',
        // 高德地图中心经纬度
        center: [120.098776, 30.226665],
        // 高德地图缩放
        zoom: 13,
        // 启用resize
        resizeEnable: true,
        // 自定义地图样式主题
        mapStyle: 'amap://styles/dark',
        // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
        renderOnMoving: true,
        // ECharts 图层的 zIndex 默认 2000
        // 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
        echartsLayerZIndex: 2019,
        // 设置 ECharts 图层是否可交互 默认为 true
        // 设置为 false 可实现高德地图自身图层交互
        // 此配置项从 v1.9.0 起开始支持
        echartsLayerInteractive: true,
        // 是否启用大数据模式 默认为 false
        // 此配置项从 v1.9.0 起开始支持
        largeMode: false
        // 说明：如果想要添加卫星、路网等图层
        // 暂时先不要使用layers配置，因为存在Bug
        // 建议使用amap.add的方式，使用方式参见最下方代码
      },
      visualMap: {
        show: true,
        right: 20,
        min: 0,
        max: 5,
        seriesIndex: 0,
        calculable: true,
        inRange: {
          color: ['blue', 'blue', 'green', 'yellow', 'red']
        }
      },
      animation: false,
      series: [
        {
          type: 'heatmap',
          // 使用高德地图坐标系
          coordinateSystem: 'amap',
          data: [],
          pointSize: 5,
          blurSize: 6
        }
      ]
    };
    // 初始化 ECharts
    var chart = echarts.init(document.getElementById('echarts-amap'));
    // 请求热力图数据
    $.get(heatmapDataURI, function (data) {
      // 转换数据
      var points = [].concat.apply([], data.map(function (track) {
        return track.map(function (seg) {
          return seg.coord.concat([1]);
        });
      }));
      option.series[0].data = points;
      chart.setOption(option);
      // 获取 ECharts 高德地图组件
      var amapComponent = chart.getModel().getComponent('amap');
      // 获取高德地图实例，使用高德地图自带的控件
      var amap = amapComponent.getAMap();
      // 添加控件 和高德地图API用法相同
      amap.addControl(new AMap.Scale());
      amap.addControl(new AMap.ToolBar());
      // 添加图层
      // var satelliteLayer = new AMap.TileLayer.Satellite();
      // var roadNetLayer = new AMap.TileLayer.RoadNet();
      // amap.add([satelliteLayer, roadNetLayer]);
      //  添加一个 Marker
      // amap.add(new AMap.Marker({
      //   position: [115, 35]
      // }));
      // 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
      // amapComponent.setEChartsLayerInteractive(false);
    });
  </script>
</body>
</html>
